<template>
  <div>
    <el-container>
      <el-header class="header" style="position: relative;">
        <img src="@/assets/logo.png" alt="">
        <span style="font-size: 20px;color: #409EFF;">旧衣之家管理平台</span>
        <el-menu style="border-bottom: none;position: absolute;right: 50px;" mode="horizontal" default-active="1">
          <el-submenu index="1">
            <template slot="title">设置</template>
            <el-menu-item index="1-1" ><router-link to="/login">退出登录</router-link></el-menu-item>
            
          </el-submenu>
        </el-menu>
      </el-header>
      <el-container>
          <el-aside class="aside" width="260px">
            <el-menu 
              class="aside-menu" 
              active-text-color="#0062ff"  
              :default-active="$route.path"
              router
              >
              <template v-for="item in menuData" >
                <el-menu-item 
                  v-if="!item.children||item.length==0"
                  :key="item.index"
                  :index="item.index"
                  >
                  <i :class="item.icon"></i>
                  <span slot="title">{{item.name}}</span>
                </el-menu-item>

                <el-submenu 
                 v-else 
                 :key="item.index"
                 :index="item.index"
                 >
                  <span slot="title">
                    <i :class="item.icon"></i>
                    {{item.name}}
                  </span>
                  <el-menu-item 
                  v-for="child in item.children" 
                  :key="child.index"
                  :index="child.index"
                  >
                    <i :class="child.icon"></i>
                    <span slot="title">{{child.name}}</span>
                  </el-menu-item>
                </el-submenu>

              </template> 
            
            </el-menu>
          </el-aside>
        <el-main >
          <router-view/>
        </el-main>
       
      </el-container>
    </el-container>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        menuData: [
          // {
          //   index:'/main/index',
          //   icon:'el-icon-s-grid',
          //   name:'首页'
          // },
          {
            index:'/main/productClass',
            icon:'el-icon-s-shop',
            name:'商品分类管理'
          },
          {
            index:'/main/product',
            icon:'el-icon-s-goods',
            name:'商品管理'
          },
          {
            
            icon:'el-icon-folder-opened',
            name:'订单管理',
            index:'',
            children:[{
              index:'/main/recycleOrder',
              icon:'el-icon-refresh',
              name:'回收订单管理'
            },{
              index:'/main/shopOrder',
              icon:'el-icon-s-order',
              name:'商品订单管理',
            }]
          },
          {
            index:'/main/swiper',
            icon:'el-icon-picture',
            name:'轮播图管理'
          },
          {
            index:'/main/news',
            icon:'el-icon-loading',
            name:'资讯管理'
          },
          {
            index:'/main/after',
            icon:'el-icon-phone',
            name:'反馈管理'
          },
          {
            index:'/main/user',
            icon:'el-icon-s-custom',
            name:'用户管理'
          },
          
        ]
      }
    },
  }
</script>

<style lang="scss" scoped>
.header{
  display: flex;
  align-items: center;
  box-shadow: 0 4px 8px 0 rgb(0 44 102 /5%);
  img{
    margin-right: 20px;
    height: 30px;
  }
}
.aside{
  box-shadow: 0 4px 8px 0 rgb(0 44 102 /5%);
  .aside-menu {
  margin-top:10px;
  border-right: none;
  height: calc(100vh - 70px);
  

}
.aside-menu .el-menu-item{
  height: 50px;
  line-height: 50px;
}
.aside-menu .el-menu-item.is-active{
  border-right: 2px solid #0062ff;
  background-color: #ebf3ff;
}
}

</style>